<div class="row createNewUser">

    <form [formGroup]="form" (ngSubmit)="addNewUser(form.value)" class="form-horizontal">

        <div class="row">
            <div class="col-sm-6"
                 [ngClass]="{'has-error': (!inputFullName.valid && inputFullName.touched), 'has-success': (inputFullName.valid && inputFullName.touched)}">
                <div class="form-group alignForm">
                    <label for="inputFullName">Full Name*</label>
                    <input type="text" class="form-control" id="inputFullName" placeholder="Full Name"
                           [formControl]="inputFullName">
                </div>
            </div>
            <div class="col-sm-6"
                 [ngClass]="{'has-error': (!inputEmail.valid && inputEmail.touched), 'has-success': (inputEmail.valid && inputEmail.touched)}">
                <div class="form-group alignForm">
                    <label for="inputEmail">Email*</label>
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email"
                           [formControl]="inputEmail">
                </div>
            </div>
        </div>
        <div class="row" *ngIf="passwordRow">
            <div class="col-sm-6"
                 [ngClass]="{'has-error': (!inputPassword.valid && inputPassword.touched), 'has-success': (inputPassword.valid && inputPassword.touched)}">
                <div class="form-group alignForm">
                    <label for="inputPassword">Password*</label>
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password"
                           [formControl]="inputPassword">
                </div>
            </div>
            <div class="col-sm-6"
                 [ngClass]="{'has-error': (!inputReEnterPassword.valid && inputReEnterPassword.touched), 'has-success': (inputReEnterPassword.valid && inputReEnterPassword.touched)}">
                <div class="form-group alignForm">
                    <label for="inputReEnterPassword">Confirm Password*</label>
                    <input type="password" class="form-control" id="inputReEnterPassword" placeholder="ReEnter Password"
                           [formControl]="inputReEnterPassword">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group alignForm">
                    <label for="inputAddress">Address</label>
                    <input type="text" class="form-control" id="inputAddress" placeholder="Enter Address"
                           [formControl]="inputAddress">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group alignForm">
                    <label for="inputCity">City</label>
                    <input type="text" class="form-control" id="inputCity" placeholder="Enter City"
                           [formControl]="inputCity">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group alignForm">
                    <label for="inputState">State</label>
                    <input type="text" class="form-control" id="inputState" placeholder="Enter State"
                           [formControl]="inputState">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group alignForm">
                    <label>Country {{country.name}}</label>
                    <select id="selectCountry" class="form-control" [value]="inputCountry._value"
                            [formControl]="inputCountry">
                        <option value="inputCountry" [value]="country.name" *ngFor="let country of countries">
                            {{country.name}}
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-sm-6">
                <div class="form-group alignForm">
                    <label for="inputVersioning">Versioning*</label>
                    <select class="form-control" [value]="inputVersioning._value" [formControl]="inputVersioning">
                        <option [value]="versions.name" *ngFor="let versions of versionDescription">
                            {{versions.description}} ({{versions.name}})
                        </option>
                    </select>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group alignForm">
                    <label for="inputGender">Gender</label><br>

                <span class="radioButton1"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="Male"
                                                  [formControl]="inputGender">
                </span><span class="radioButton">Male</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <span class="radioButton1">
                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="Female"
                       [formControl]="inputGender">
               </span> <span class="radioButton">Female</span>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-sm-6" *ngIf="showViewDiv">
                <div class="form-group alignForm">
                    <label for="inputIsAdmin">Is Admin</label><br>
                    <input class="adminCheckbox" type="checkbox" id="inputIsAdmin" [formControl]="inputIsAdmin"
                           (click)="getDataAdminStatus()"/>
                </div>
            </div>


            <div class="col-sm-6">
                <div class="form-group alignForm">
                    <label for="inputAboutMe">About Me</label>
                    <textarea type="text" class="form-control textareaHeight" id="inputAboutMe" placeholder="About Me"
                              [formControl]="inputAboutMe"></textarea>
                </div>
            </div>

            <div class="col-sm-6 addUserSubmitButton" *ngIf="!showViewDiv">
                <div class="form-group alignForm" *ngIf="editUserButton">
                    <label></label>
                    <button [disabled]="!form.valid" type="submit" class="btn btn-primary addUserButtonForAdmin">Submit</button>
                </div>
                <div class="form-group alignForm" *ngIf="!editUserButton">
                    <label></label>
                    <button type="submit" class="btn btn-primary addUserButtonForAdmin"
                            (click)="editUserInformation = true">Edit User
                    </button>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-sm-6 addUserSubmitButton" *ngIf="showViewDiv">
                <div class="form-group alignForm" *ngIf="editUserButton">
                    <label></label>
                    <button type="submit"  class="btn btn-primary addUserButton">Submit</button>
                </div>
                <div class="form-group alignForm" *ngIf="!editUserButton">
                    <label></label>
                    <button type="submit" class="btn btn-primary addUserButton" (click)="editUserInformation = true">
                        Edit User
                    </button>
                </div>
            </div>
        </div>
    </form>


</div>
